<template>
  <el-dialog
    :title="'选择组织【'+title+'】'"
    :visible.sync="dialogVisible"
    append-to-body
    width="600px">
    <div class="person_body">
      <div class="person_tree">
        <el-scrollbar style="height: 100%">
        <el-tree
          :data="deptOptions"
          :props="defaultProps"
          show-checkbox
          check-strictly
          @check-change="checkChange"
          :default-checked-keys="defaultCheckedKeys"
          node-key="id"
          :expand-on-click-node="false"
          ref="tree"
          default-expand-all
        />
        </el-scrollbar>
      </div>
      <div class="person_select">
        <div class="title">已选组织</div>
        <div class="list">
          <div class="item" v-for="item in checkDept" :key="item.id">
            <span>{{item.name}}</span>
            <i class="el-icon-close" @click="$refs.tree.setChecked(item.id,false)"></i>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
    export default {
        props: {
            value: {
                type: [Array],
                default() {
                    return []
                }
            },
        },
        inject: ['deptList'],
        components: {},
        data() {
            return {
                checkDept:[

                ],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
              defaultCheckedKeys:[],
              dialogVisible: false,
                loading: false,
                deptOptions: [],
            }
        },
        computed: {
            title(){
              return  this.checkDept.map(x=>x.name).join(',')
            },
        },
        watch: {

        },
        methods: {
          checkChange(data,v){
            if(v){
              this.checkDept.push({
                id:data.id,
                name:data.name
              })
            }else {
              const index = this.checkDept.findIndex(x=>x.id===data.id)
              this.checkDept.splice(index,1)
            }
          },
            /** 查询部门下拉树结构 */
            getTreeselect() {
                this.deptOptions = this.deptList()
            },
            confirm() {
              this.$emit('input', this.checkDept)
              this.dialogVisible = false
            },
            show() {
              this.checkDept = [
                ...this.value
              ]
              this.defaultCheckedKeys = this.checkDept.map(x=>x.id)
                this.dialogVisible = true
                this.getTreeselect()
            }
        },
        created() {

        },
        mounted() {

        },
    }
</script>
<style scoped lang="scss">
    .person_body {
        border: 1px solid #f5f5f5;
        height: 400px;
        display: flex;

        .person_tree {
            width: 550px;
            height: 100%;
            border-right: 1px solid #f5f5f5;
        }

        .person_select {
            padding: 5px;
            width: 100%;
            height: 100%;
            font-size: 12px;
          .title{
            font-size: 18px;
          }
          .list{
            margin-top: 10px;
            .item{
              margin: 5px;
              padding: 5px;
              font-size: 14px;
              height: 25px;
              line-height: 25px;
              position: relative;
              background-color: #ecf5ff;
              color: #409eff;
              border: 1px solid #d9ecff;
              border-radius: 4px;
              white-space: nowrap;
              .el-icon-close{
                cursor: pointer;
                line-height: 25px;
                position: absolute;
                color: #909399;
                right: 12px;
              }
            }
          }
        }

    }
</style>
